import Taro, { Component } from '@tarojs/taro'
import { View, Text, Image } from '@tarojs/components'
import { AtButton, AtInput } from 'taro-ui'
import { DNavBar, DImagesupload, DLookImages, Ddialog, DAgree } from '@/components'
import http from '@/api'
import './index.scss'
import { validIdCard, validPhone } from '@/utils/validate'

const peopleRight = require('../../assets/people_right.png')
const peopleLeft = require('../../assets/people_info.png')

export default class PersonalCert extends Component {
    state = {
        title: '个人认证',
        name: '', // 姓名
        idcard: '', // 身份证号码
        // phone: '', // 手机号码
        imIdcardBakUrl: '', // 身份证反面图片(国徽)
        imIdcardUrl: '', // 身份证正面图片(人像)
        showImIdcardUrl: false,
        showImIdcardBakUrl: false,
        showDialog: false,
        status: false, // 个人认证协议
        isBack: false,
        active: 1, // 1：个人认证 2：请确认认证信息
    }

    componentDidMount() {
        // id 重新认证用户id
        const { id } = this.$router.params
        if (id) {
            this.getPersonalAuthInfo(id)
        }
        this.getUserInfo()
    }

    async getUserInfo() {
        let userInfo = await http.myselfDetail()
        this.setState({
            phone: userInfo.imPhone
        })
    }

    async getPersonalAuthInfo(id) {
        const personDetail = await http.getPersonalAuthInfo({ id })
        let { imName: name, imPhone: phone, imCard: idcard, imIdcardUrl, imIdcardBakUrl } = personDetail
        this.setState({
            name,
            idcard,
            phone,
            imIdcardUrl: [{ url: imIdcardUrl }],
            imIdcardBakUrl: [{ url: imIdcardBakUrl }]
        })
    }

    onChangeImagesLeft(list) {
        this.setState({
            imIdcardUrl: list
        })
    }

    onChangeImagesRight(list) {
        this.setState({
            imIdcardBakUrl: list
        })
    }

    onClickLeftIcon = () => {
        let { active } = this.state
        active--
        this.setState({
            active,
            title: this.getTitle(active),
            isBack: active === 1 ? false : true
        })

    }

    getTitle(status) {
        return {
            $1: '个人认证',
            $2: '请确认认证信息',
        }[`$${status}`]
    }


    handleChange(type, newVal) {
        switch (type) {
            case 'name':
                this.setState({
                    name: newVal
                })
                break
            case 'idcard':
                this.setState({
                    idcard: newVal
                })
                break
            case 'phone':
                this.setState({
                    phone: newVal
                })
                break
            default:
                break
        }
    }

    tipShowToast(title) {
        Taro.showToast({
            title,
            icon: 'none'
        })
    }

    NextStep() {
        const { name, idcard, phone, imIdcardBakUrl, imIdcardUrl, status } = this.state

        if (!name) {
            this.tipShowToast('姓名不能为空')
            return
        }
        if (!idcard) {
            this.tipShowToast('身份证不能为空')
            return
        }
        if (!validIdCard(idcard)) {
            this.tipShowToast('身份证格式错误')
            return
        }
        // if (!phone) {
        //     this.tipShowToast('手机号不能为空')
        //     return
        // }
        // if (!validPhone(phone)) {
        //     this.tipShowToast('手机号格式错误')
        //     return
        // }
        if (!imIdcardBakUrl.length || !imIdcardUrl.length) {
            this.tipShowToast('身份证照片不能为空')
            return
        }
        if (!status) {
            this.tipShowToast('请阅读并同意《个人认证协议》')
            return
        }
        this.setState({
            active: 2,
            isBack: true,
            title: '请确认认证信息',
        })
    }

    onHandleChange(status) {
        this.setState({
            status
        })
    }

    async submit() {
        const { name: imName, idcard: imCard, phone: imPhone, imIdcardUrl, imIdcardBakUrl } = this.state
        const infoMyEntity = {
            imCard,
            imIdcardBakUrl: imIdcardBakUrl[0].url,
            imIdcardUrl: imIdcardUrl[0].url,
            imName,
            imPhone
        }
        await http.personalAuth(infoMyEntity)

        this.setState({
            showDialog: true
        })
    }

    render() {
        const {
            title,
            name,
            idcard,
            phone,
            imIdcardUrl,
            imIdcardBakUrl,
            showImIdcardUrl,
            showImIdcardBakUrl,
            showDialog,
            status,
            isBack,
            active
        } = this.state
        const { id } = this.$router.params

        // 输入信息
        const inputInfo = (
            <View>
                <AtInput
                    title="姓名"
                    required
                    type="text"
                    value={name}
                    onChange={this.handleChange.bind(this, 'name')}
                    placeholder="请输入真实姓名"
                ></AtInput>
                <AtInput
                    title="身份证号码"
                    required
                    type="idcard"
                    value={idcard}
                    onChange={this.handleChange.bind(this, 'idcard')}
                    placeholder="请输入身份证号码"
                ></AtInput>
                <AtInput
                    title="手机号码"
                    type="phone"
                    value={phone}
                    disabled
                    // onChange={this.handleChange.bind(this, 'phone')}
                    // placeholder="请输入手机号码"
                ></AtInput>

                <View className="border"></View>

                <View className="tip">请提供如下资料照片</View>
                <AtInput title="身份证照片" required className="idcard_photo"></AtInput>
                <View className="item_images__box">
                    {
                        id ? (imIdcardUrl.length && <DImagesupload onChangeImages={this.onChangeImagesLeft.bind(this)} count={1} className="item_images__box_left" text={'正面(头像)'} value={imIdcardUrl} bgImage={peopleRight} ></DImagesupload>)
                           : <DImagesupload onChangeImages={this.onChangeImagesLeft.bind(this)} count={1} className="item_images__box_left" text={'正面(头像)'} value={imIdcardUrl} bgImage={peopleRight} ></DImagesupload>
                    }
                    {
                        id ? (imIdcardBakUrl.length && <DImagesupload onChangeImages={this.onChangeImagesRight.bind(this)} count={1} value={imIdcardBakUrl} text={'背面(国徽)'} bgImage={peopleLeft} ></DImagesupload>)
                            : <DImagesupload onChangeImages={this.onChangeImagesRight.bind(this)} count={1} value={imIdcardBakUrl} text={'背面(国徽)'} bgImage={peopleLeft} ></DImagesupload>
                    }


                </View>

                <View className="btn">
                    <DAgree type='2' value={status} onHandleChange={this.onHandleChange.bind(this)} text={'《个人认证协议》'}></DAgree>
                    <AtButton onClick={this.NextStep.bind(this)}>提交</AtButton>
                </View>
            </View>
        )

        // 确认信息
        const showInfo = (
            <View>
                <View className="show_info">
                    <Text className="show_title">姓名</Text>
                    <Text className="show_content">{name}</Text>
                </View>
                <View className="show_info">
                    <Text className="show_title">身份证</Text>
                    <Text className="show_content">{idcard}</Text>
                </View>
                <View className="show_info">
                    <Text className="show_title">联系方式</Text>
                    <Text className="show_content">{phone}</Text>
                </View>
                <View className="show_info">
                    <Text className="show_title">身份证照片</Text>
                    <Text className="show_content">&nbsp;</Text>
                </View>
                <View className="idcard_photos">
                    <Image className="img" mode="scaleToFill" src={imIdcardUrl && imIdcardUrl[0].url} onClick={() => {
                        this.setState({ showImIdcardUrl: true })
                    }}></Image>
                    <Image className="img" mode="scaleToFill" src={imIdcardBakUrl && imIdcardBakUrl[0].url} onClick={() => {
                        this.setState({ showImIdcardBakUrl: true })
                    }}></Image>
                </View>

                <View className="btns">
                    <AtButton
                        onClick={() => {
                            this.setState({
                                active: 1,
                                title: '个人认证'
                             })
                        }}
                    >
                        修改
                    </AtButton>
                    <AtButton onClick={this.submit.bind(this)}>提交</AtButton>
                </View>
            </View>
        )

        return (
            <View className="personalcert">
                <DNavBar status={isBack} title={title} onClickLeftIcon={this.onClickLeftIcon}></DNavBar>

                <View className="container">
                    {active == 1 && inputInfo}
                    {active == 2 && showInfo}
                </View>

                <DLookImages url={imIdcardUrl && imIdcardUrl[0].url} status={showImIdcardUrl} onLookHandle={() => {
                    this.setState({ showImIdcardUrl: false })
                }}></DLookImages>
                <DLookImages url={imIdcardBakUrl && imIdcardBakUrl[0].url} status={showImIdcardBakUrl} onLookHandle={() => {
                    this.setState({ showImIdcardBakUrl: false })
                }}></DLookImages>

                <Ddialog
                    isShow={showDialog}
                    content={'个人认证表单成功提交，请等待管理员审核。'}
                    onSure={() => {
                        Taro.navigateBack()
                    }}
                ></Ddialog>
            </View>
        )
    }
}
